<!-- 运费管理 -->
<template>
  <el-card class="search-card-box" shadow="never" style="background-color:#fff; margin: 20px">
    <!-- 调用运费的添加方法 -->
    <el-button
      type="warning"
      style="margin-bottom:20px"
      class="customer-add-btn"
      @click="handleAdd()"
    >新增模板
    </el-button>
    <el-table
      :key="tableKey"
      ref="multipleTable"
      :data="dataList"
      fit
      style="width: 100%"
      :header-cell-style="{ background: 'rgba(250,252,255,1)' }"
    >

      <el-table-column align="left" label="模板类型" min-width="130">
        <template slot-scope="scope">
          <span v-if="scope.row.templateType === 1">同城寄</span>
          <span v-else-if="scope.row.templateType === 2">省内寄</span>
          <span v-else-if="scope.row.templateType === 3">经济区互寄</span>
          <span v-else-if="scope.row.templateType === 4">跨省</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="运送类型" min-width="130">
        <template slot-scope="scope">
          <span v-if="scope.row.transportType == 1">普快</span>
          <span v-else-if="scope.row.transportType == 2">特快</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="关联城市" min-width="130">
        <template slot-scope="scope">
          <span v-if="scope.row.associatedCityList == 1">全国</span>
          <span v-else-if="scope.row.associatedCityList == 2">京津翼</span>
          <span v-else-if="scope.row.associatedCityList == 3">江浙沪</span>
          <span v-else-if="scope.row.associatedCityList == 4">川渝</span>
          <span v-else-if="scope.row.associatedCityList == 5">黑吉辽</span>
        </template>
      </el-table-column>
      <el-table-column
        align="left"
        label="首重价格"
        min-width="130"
        prop="firstWeight"
      >
      </el-table-column>
      <el-table-column
        align="left"
        label="续重价格"
        min-width="130"
        prop="continuousWeight"
      >
      </el-table-column>
      <el-table-column
        align="left"
        label="轻抛系数"
        min-width="130"
        prop="lightThrowingCoefficient"
      >
      </el-table-column>
      <el-table-column
        align="center"
        fixed="right"
        label="操作"
        width="129px"
        class-name="small-padding fixed-width"
      >
        <el-col width="100%" slot-scope="scope">
          <!-- 调用运费的编辑方法 -->
          <el-button
            class="customer-add-btn"
            style="color:#419EFF;border: none;padding: 0; margin: 0;"
            @click="handleAdd(scope.row)"
          >编辑
          </el-button>
          <span class="line"></span>
          <!-- 调用运费的删除方法 -->
          <el-button
            class="customer-add-btn"
            style="color:#F56C6C;border: none;padding: 0; margin: 0;"
            @click="handleDel(scope.row.id)"
          >删除
          </el-button>
        </el-col>
      </el-table-column>
    </el-table>
    <!-- 新增运费 -->
    <freight-add
      ref="addFreight"
      class="add-form-dialog"
      @resetForm="reset"
      :title-info="titleInfo"
      :form-base="formData"
      :agency-options="agencyOptions"
    />
  </el-card>
</template>

<script>
import { freightManageList } from '@/api/freight-manage'
import FreightAdd from '@/views/transit/components/freight-add.vue'

export default {
  components: { FreightAdd },
  data() {
    return {
      tableKey: 0,
      dataList: [],
      listLoading: false,
      searchkey: '',
      titleInfo: {},
      formData: {},
      agencyOptions: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    reset() {
      this.getList()
    },
    // 删除运费
    handleDel(id) {
      this.$confirm('是否删除该运费模板?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // await freightManageDel(id)
        this.$message.warning('很抱歉,演示系统,不允许删除!')
        await this.getList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 获取运单列表数据
    async getList() {
      this.listLoading = true
      const { data: res } = await freightManageList()
      this.listLoading = false
      // 获取数据给dataList
      this.dataList = res
    },
    // 新增运费
    async handleAdd(row) {
      if (row) {
        this.formData = { ...row } // 深拷贝对象
        this.titleInfo.text = '编辑模板'
        this.$refs.addFreight.dialogFormV()
      } else {
        this.titleInfo.text = '新增模板'
        this.formData = {}
      }
      this.$nextTick(() => {
        this.$refs.addFreight.dialogFormV()
      })
    }
  }
}
</script>

<style lang="scss" scoped rel="stylesheet/scss">
.waybill-list {
  .el-dialog__wrapper {
    ::v-deep .el-dialog__body {
      padding-left: 0px;
    }
  }
}

.line {
  display: inline-block;
  width: 1px;
  height: 12px;
  background: #E4E7ED;
  margin: 0 10px;
}
</style>
